<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="收房合同编号" prop="sfContractNo" label-width="110px">
        <el-input v-model="ruleForm.sfContractNo" disabled=""></el-input>
        <el-button type="primary" @click="openGetList">收房合同查询</el-button>
      </el-form-item>
      <el-form-item label="房产信息" prop="houseName">
        <el-input v-model="ruleForm.houseName" disabled=""></el-input>
      </el-form-item>
      <el-form-item label="业主姓名" prop="ownerName">
        <el-input v-model="ruleForm.ownerName" disabled=""/>
      </el-form-item>
      <el-form-item label="业主手机号" prop="ownerMobile">
        <el-input v-model="ruleForm.ownerMobile" disabled=""/>
      </el-form-item>
      <el-form-item label="业主身份证号" prop="ownerIdCard">
        <el-input v-model="ruleForm.ownerIdCard" disabled=""/>
      </el-form-item>
      <el-form-item label="银行卡号">
        <el-input v-model="ruleForm.bankCard" disabled=""></el-input>
      </el-form-item>
      <el-form-item label="银行名称">
        <el-input v-model="ruleForm.bankName" disabled=""></el-input>
      </el-form-item>
      <el-form-item label="开户行">
        <el-input v-model="ruleForm.bankOpen" disabled=""></el-input>
      </el-form-item>
      <el-form-item label="金融产品选择" prop="productId">
        <el-select v-model="ruleForm.productId" placeholder="请选择" @change="test">
          <el-option
            v-for="item in product"
            :key="item.id"
            :label="item.jrProductName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="年利率" prop="rate">
        <el-input v-model="ruleForm.rate"></el-input>
      </el-form-item>
      <el-form-item label="借款期限" prop="periods">
        <el-input v-model="ruleForm.periods"></el-input>
      </el-form-item>
      <el-form-item label="年一次性服务费率" prop="serviceFee" label-width="130px">
        <el-input v-model="ruleForm.serviceFee"></el-input>
      </el-form-item>
      <el-form-item label="借款金额" prop="balance">
        <el-input v-model="ruleForm.balance" disabled=""></el-input>
      </el-form-item>
      <el-form-item label="授信额度" prop="creditLine">
        <el-input v-model="ruleForm.creditLine" disabled=""></el-input>
      </el-form-item>
      <el-button type="primary" @click="sum('ruleForm')">分期计算详情</el-button>

      <el-table
        :data="tableData"
        style="width: 100%" :hidden=loan>
        <el-table-column
          prop="no"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="realEstateInfo"
          label="房产信息">
        </el-table-column>
        <el-table-column
          prop="roomCode"
          label="房源编号">
        </el-table-column>
        <el-table-column
          prop="monthRepaymentAmount"
          label="账期还款金额">
          <template v-slot="code">
            {{ code.row.monthRepaymentAmount + '元' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="monthRateAmount"
          label="账期利息">
          <template v-slot="code">
            {{ code.row.monthRateAmount + '元' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="starLoanday"
          label="借款期限">
          <template v-slot="code">
            {{ code.row.starLoanday + ' 至 ' + code.row.endLoanday }}
          </template>
        </el-table-column>
      </el-table>
      <el-form :inline="true" :model="loans" class="demo-form-inline" label-width="150px" :hidden=loan>
        <el-form-item label="应付租约合计">
          <el-input v-model="ruleForm.payAbleCount" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="还款总额合计">
          <el-input v-model="ruleForm.rePaymentCount" disabled=""></el-input>
        </el-form-item>
        <br>
        <el-form-item label="服务费">
          <el-input v-model="ruleForm.serCharge" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="收房贷利息合计">
          <el-input v-model="ruleForm.interestCount" disabled=""></el-input>
        </el-form-item>
      </el-form>

      <el-form-item label="备注" prop="estate">
        <el-input type="textarea" v-model="estate"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交申请</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="收房合同查询" :visible.sync="dialogTableVisible">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-input v-model="formInline.premiseName" placeholder="小区名称"></el-input>
        </el-form-item>
        <el-form-item label="业主姓名">
          <el-input v-model="formInline.ownerName" placeholder="业主姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="list">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="gridData">
        <el-table-column property="ownerName" label="业主姓名" width="150"></el-table-column>
        <el-table-column property="houseName" label="房产信息" width="200"></el-table-column>
        <el-table-column property="conSignTime" label="签约日期" width="200"></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row.id)" type="text" size="small">选中</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="toPage"
        :page-size="formInline.size"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </el-dialog>

  </div>
</template>

<script>
import {
  contractListById,
  getLists,
  listSfLoan,
  productById,
  queryJrProduct,
  savesf,
} from "@/api/wishu/finance/finance";

export default {
  name: "index.vue",
  data() {
    return {
      dialogTableVisible: false,
      gridData: [],
      ruleForm: {},
      tableData: [],
      estate: '',
      formInline: {
        current: 1,
        size: 5,
      },
      total: 1,
      loan: true,
      form: {},
      product: [],
      rules: {
        sfContractNo: [{required: true, message: '请输入收房合同编号', trigger: 'blur'},],
        houseName: [{required: true, message: '请输入房产信息', trigger: 'blur'},],
        ownerName: [{required: true, message: '请输入业主姓名', trigger: 'blur'},],
        ownerMobile: [{required: true, message: '请输入业主手机号', trigger: 'blur'},],
        ownerIdCard: [{required: true, message: '请输入业主身份证号', trigger: 'blur'},],
        productId: [{required: true, message: '请选择金融产品', trigger: 'change'}],
        rate: [{required: true, message: '请输入年利率', trigger: 'blur'},],
        periods: [{required: true, message: '请输入借款期限', trigger: 'blur'},],
        serviceFee: [{required: true, message: '请输入年一次性服务费率', trigger: 'blur'},],
        balance: [{required: true, message: '请输入借款金额', trigger: 'blur'},],
        creditLine: [{required: true, message: '请输入授信额度', trigger: 'blur'},],
      }
    }
  }, methods: {
    sum(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          listSfLoan(this.ruleForm).then(res => {
            if (res.code == 200) {
              this.tableData = res.data.dataList.sfLoan;
              this.ruleForm.payAbleCount = res.data.dataList.payAbleCount;
              this.ruleForm.rePaymentCount = res.data.dataList.rePaymentCount;
              this.ruleForm.serCharge = res.data.dataList.serCharge;
              this.ruleForm.interestCount = res.data.dataList.interestCount;
              this.loan = false;
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //选择金融产品
    test() {
      productById(this.ruleForm.productId).then(res => {
        this.ruleForm.creditLine = res.data.creditLine;
        this.ruleForm.periods = res.data.instalmentPeriod;
      });
    },
    //查询所有金融产品
    queryJrProduct() {
      queryJrProduct(this.formInline).then(res => {
        this.product = res.data;
      });
    },
    toPage(page) {
      this.formInline.current = page;
      this.list();
    },
    list() {
      getLists(this.formInline).then(res => {
        this.gridData = res.data.records;
        this.total = res.data.total;
      });
    },
    openGetList() {
      this.list();
      this.dialogTableVisible = true;
    },
    handleClick(id) {
      contractListById(id).then(res => {
        this.ruleForm = res.data;
        this.ruleForm.periodsA = this.ruleForm.periods;
        this.dialogTableVisible = false;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          savesf(this.ruleForm).then(res => {
            if (res.code == 200) {
              this.$message.success("提交成功");
              window.location.reload();
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }, created() {
    this.queryJrProduct();
  }
}
</script>

<style scoped>

</style>
